<template>
  <div v-if="visible" class="floating-panel">
    <span class="close-btn" role="button" aria-label="关闭" tabindex="0" @click="handleCancel" @keydown.enter="handleCancel">×</span>
    <div class="floating-panel__header">装配</div>
    <div class="floating-panel__body">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="90px" size="small">
        <el-form-item label="选择部件" prop="list">
          <el-select v-model="form.list" placeholder="请选择部件"  filterable clearable style="width: 260px">
            <el-option v-for="p in availableParts" :key="p.key" :label="p.name" :value="p.key" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleConfirm" :disabled="form.list.length===0">确认</el-button>
          <el-button @click="handleCancel">取消</el-button>
          <el-button text @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <div v-if="availableParts.length === 0" class="empty-hint">暂无可选部件</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount, computed, watch } from 'vue'
import type { FormRules } from 'element-plus'
import { useTreeStore, type ProjectTreeNode } from '@/store/modules/tree'
import { usePropertyForm } from '../composables/usePropertyForm'
import { useAvailableSets } from '../composables/useAvailableSets'
// 接收当前项目与当前节点；node 用来写入 property
const props = defineProps<{ projectId: string | number | null; node: ProjectTreeNode | null }>()
const emit = defineEmits<{ (e:'cancel'):void; (e:'confirm', list: string[]): void }>()
const visible = ref(true)
// 多选字段 list
const form = reactive<{ list: string[] }>({ list: [] })
const rules: FormRules = { list: [{ required: true, message: '请选择至少一个部件', trigger: 'change' }] }
const treeStore = useTreeStore()
// 使用通用方法：获取所有 partChildren 作为可选部件
const { availableSets: allPartChildren } = useAvailableSets(computed(()=>props.projectId), 'partChildren')
interface PartOption { key: string; name: string }
const availableParts = computed((): PartOption[] => allPartChildren.value.map(p => ({ key: p.key, name: p.name })) )
function ensureLoaded(){
  if (props.projectId != null && treeStore.getTree(props.projectId).length === 0) treeStore.load(props.projectId)
}
function handleCancel(){ visible.value = false; emit('cancel') }
const wrapperEmit = (e: 'confirm' | 'cancel') => { if(e==='confirm') emit('confirm', [...form.list]); else emit('cancel') }
const { formRef, handleConfirm } = usePropertyForm(form, { node: props.node, projectId: props.projectId, persist: false }, wrapperEmit)
function resetForm(){ form.list.splice(0, form.list.length); formRef.value?.clearValidate(); if(props.node?.property?.list) delete props.node.property.list }
function handleKey(e:KeyboardEvent){ if(e.key==='Escape'&&visible.value) handleCancel() }
onMounted(()=>{ window.addEventListener('keydown',handleKey); ensureLoaded() })
onBeforeUnmount(()=>window.removeEventListener('keydown',handleKey))
watch(() => props.projectId, () => ensureLoaded())
</script>
<style scoped lang="scss">
@use './common.scss' as *;
.empty-hint { color: #999; font-size: 12px; margin-top: 4px; }
</style>